// @ts-nocheck
export default {
    data: {
        verificationState: '', // 滑块验证状态
        canvasHeigth: 0, // canvas高度
        canvasWidth: 0, // canvas宽度
        pic:[{x:0,y:0,row:0,column:0,index:0}], // x/y:在canvas中的坐标位置（不会改变）,row/column:对原图分割后的横纵编号,元素：index：子图片的位置编号
        ctx: '',
        lastPoinIndex: '',// 上一个点index
        nowPoinIndex: '',// 当前点index
        choiceImg: '',// 选择的照片
        canvasImg: '', // canvas图片
    },
    props: {
        canvasImgList: {// 验证主图地址列表
            default: [],
            type: Array
        },
        imgWidth: {// 图片宽度
            default: 338,
            type: Number
        },
        imgHeigth: {// 图片高度
            default: 200,
            type: Number
        },
        rowColumn: {// 行和列
            default: [2, 3],
            type: Array
        }
    },
    onReady(){
        this._initData(); // 数据初始化
        setTimeout(() => {
            this.ctx = this.$element('canvas').getContext('2d');
            this._loadImg();
        }, 100)
    },
//    数据初始化
    _initData() {
        this.choiceImg = this.canvasImgList[this._randomNum(0, this.canvasImgList.length)];
        let canvasInfoList = [];
        let index = 0;
        for (var i = 0; i < this.rowColumn[0]; i++) {
            for (var j = 0; j < this.rowColumn[1]; j++) {
                canvasInfoList.push({
                    x: i,
                    y: j,
                    row: i,
                    column: j,
                    index: index
                })
                index++;
            }
        }
        while(this.verification('inside')) {
            canvasInfoList = this._changeP(canvasInfoList);// 改变位置
            this.pic = canvasInfoList;
        }
    },
    _changeP(canvasInfoList) {
        for (let i = 0; i < 50; i++) {
            let ran1,
                ran2,
                temp = {};
            // 随机获取
            ran1 = parseInt((this.rowColumn[0] * this.rowColumn[1] - 1) * Math.random());
            ran2 = parseInt((this.rowColumn[0] * this.rowColumn[1] - 1) * Math.random());
            temp.row = canvasInfoList[ran1].row;
            temp.column = canvasInfoList[ran1].column;
            canvasInfoList[ran1] = {
                ...canvasInfoList[ran1],
                row: canvasInfoList[ran2].row,
                column: canvasInfoList[ran2].column,
            };
            canvasInfoList[ran2] = { ...canvasInfoList[ran2], ...temp };
        }
        return canvasInfoList;
    },
    _loadImg() {
        this.canvasImg = new Image();
        this.canvasImg.src = this.choiceImg;
        this.canvasImg.width = this.imgWidth;
        this.canvasImg.height = this.imgHeigth;
        this.canvasImg.onload = () => {
            for(let i=0;i<this.rowColumn[0]*this.rowColumn[1];i++) {
                this._drawImage(i);// 绘制
            }
        }
        img.onerror = () => {
            console.log('加载图片失败');
        }
    },
//    绘制图片
    _drawImage(i) {
        const width = Math.floor(this.imgWidth / this.rowColumn[1]);
        const height = Math.floor(this.imgHeigth / this.rowColumn[0]);
        // 绘制到canvas的各元素的起始坐标
        let dx = this.pic[i].y * width;
        let dy = this.pic[i].x * height;
        // 对图片进行切割的起始点坐标
        let cx = this.pic[i].column * width;
        let cy = this.pic[i].row * height;
        this.ctx.drawImage(this.canvasImg, cx, cy, width, height, dx, dy, width - 1, height - 1);
    },
//    点击图片
    canvasTouchstart(event) {
        if (this.verificationState === 'success') {
            return false;
        }
        if (this.lastPoinIndex === '' && this.nowPoinIndex === '') {
            this.lastPoinIndex = this.nowPoinIndex;
            this.nowPoinIndex = this._getPoinIndex(event.touches[0]);
        } else {
            this.lastPoinIndex = this.nowPoinIndex;
            this.nowPoinIndex = this._getPoinIndex(event.touches[0]);
            this._changePosition(this.lastPoinIndex, this.nowPoinIndex);
            this.lastPoinIndex = '';
            this.nowPoinIndex = '';
        }
    },
//    交换位置
    _changePosition(l, n) {
        const picLC = this.pic[l].column;
        const picNR = this.pic[l].row;
        this.pic[l].column = this.pic[n].column;
        this.pic[l].row = this.pic[n].row;
        this.pic[n].column = picLC;
        this.pic[n].row = picNR;
        this._drawImage(l);// 绘制
        this._drawImage(n);// 绘制
    },
//    获取传入点的index
    _getPoinIndex(poin){
        let currentIndex = 0;
        const width = Math.floor(this.imgWidth / this.rowColumn[1]);
        const height = Math.floor(this.imgHeigth / this.rowColumn[0]);

        for (var i = 0; i < this.rowColumn[0]; i++) {
            for (var j = 0; j < this.rowColumn[1]; j++) {
                const row = j * width;
                const column = i * height;
                if (poin.localX > row && poin.localX < (row + width) && poin.localY > column && poin.localY < (column + height)) {
                    currentIndex = i * this.rowColumn[1] + j;
                }
            }
        }
        return currentIndex;
    },
//   更新验证数据
    updataVerification() {
        this.verificationState = '';
        this._initData();
        this._loadImg();
    },
//    验证方法
    verification(type) {
        const r = this.pic.every(item => {
            return item.x === item.row && item.y === item.column;
        })
        if (type === 'inside') {
            return r;
        }
        if (r) {
            this.verificationState = 'success';
            this.$emit('verificationSuccess');
        } else {
            this.verificationState = 'error';
            this.$emit('verificationError');
        }
    },
//    生成一个随机数
    _randomNum(min, max) {
        return Math.floor(Math.random() * (max - min) + min)
    },
}
